<!-- 驳回弹框 -->
<template>
<!--    <el-dialog v-model="showDialog" title="人工注销" width="90vw">-->
        <el-card>
            <filterComponent v-model:filter-data="filterData" @doSearch="search" />
        </el-card>
        <el-card style="margin-top: 20px">
            <tableComponent class="set-height" selection :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="getuserlist">
                <template #ownIdCardFront>
                    <el-table-column label="身份证正面">
                        <template #default="scope">
                            <span v-if="!scope.row.ownIdCardFront">--</span>
                            <div v-else>
                                <bigPicture text="点击查看" :imageUrl="scope.row.ownIdCardFront" />
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #ownIdCardBack>
                    <el-table-column label="身份证反面">
                        <template #default="scope">
                            <span v-if="!scope.row.ownIdCardBack">--</span>
                            <div v-else>
                                <bigPicture text="点击查看" :imageUrl="scope.row.ownIdCardBack" />
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="openuploadtc(scope.row)">上传身份证正反面</el-button>
                            <el-button link type="primary" size="small" @click="userlogout(scope.row)">注销</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
        <el-dialog :width="isMobile ? '580' : '30%'" v-model="dialogbulletVisible" title="上传身份证正反面">
            <div class="uploadtitle"><span class="red">*</span>身份证正面</div>
            <el-upload accept="image/*" ref="upload" action="#" list-type="picture-card" :limit="1"
                :on-exceed="handleExceed" :on-change="bullpayonChange" :auto-upload="false">
                <el-icon>
                    <Plus />
                </el-icon>
                <template #file="{ file }">
                    <div>
                        <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <el-icon><zoom-in /></el-icon>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </span>
                        </span>
                    </div>
                </template>
            </el-upload>
            <el-dialog v-model="dialogVisible" :width="isMobile ? '960' : '50%'">
                <img w-full style="width: 100%;" crossorigin="anonymous" :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <div class="uploadtitle"><span class="red">*</span>身份证反面</div>
            <el-upload accept="image/*" ref="upload1" action="#" list-type="picture-card" :limit="1"
                :on-exceed="handleExceed1" :on-change="bullpayonChange1" :auto-upload="false">
                <el-icon>
                    <Plus />
                </el-icon>
                <template #file="{ file }">
                    <div>
                        <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview1(file)">
                                <el-icon><zoom-in /></el-icon>
                            </span>
                            <span v-if="!disabled1" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </span>
                        </span>
                    </div>
                </template>
            </el-upload>
            <el-dialog :width="isMobile ? '960' : '50%'" v-model="dialogVisible1">
                <img w-full style="width: 100%;" crossorigin="anonymous" :src="dialogImageUrl1" alt="Preview Image" />
            </el-dialog>
            <span class="dialog-footer" style="display: flex; align-items: center; justify-content: center">
                <el-button class="my_cancelbtn" @click="cancle">取消</el-button>
                <el-button type="primary" @click="updateIdCardPhoto" class="my_btn">确定</el-button>
            </span>
        </el-dialog>
<!--    </el-dialog>-->
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessageBox, ElMessage, genFileId } from 'element-plus'
import { getuserlistapi, userlogoutapi, updateIdCardPhotoapi } from '@/api/employeeCancellation'
import { shake } from '@/utils/utils'
import type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    itemDetail: {
        type: Object
    },
    rejectType: {
        type: String,
        default: 'add'
    }
})
const emits = defineEmits(['update:show', 'success'])

const showDialog = ref(false)
const bhtextarea = ref('')

const isMobile = ref((window as any).isMobile)

const filterData = ref({
    list: {
        idCardNo: {
            name: '员工身份证',
            prop: 'idCardNo',
            value: '',
            placeholder: '请输入员工身份证',
            type: 'input',
            inputType: 'text',
            handleFocus: () => {

            },
            handleChange: () => {

            },
            handleInput: () => {
            }
        },
        phone: {
            name: '手机号',
            prop: 'phone',
            value: '',
            placeholder: '请输入员员工手机号',
            type: 'input',
            inputType: 'text',
            handleFocus: () => {

            },
            handleChange: () => {

            },
            handleInput: () => {

            }
        }
    }
})

const tableHeader = ref([
    {
        label: '员工姓名',
        prop: 'userName'
    },
    {
        label: '手机号',
        prop: 'phone',
        width: 200
    },
    {
        label: '身份证',
        prop: 'idCardNo',
        width: 200
    },
    {
        label: '身份证正面',
        prop: 'ownIdCardFront'
    },
    {
        label: '身份证反面',
        prop: 'ownIdCardBack'
    },
    {
        label: '民族',
        prop: 'nation'
    },
    {
        label: '注册时间',
        prop: 'createTime'
    },
    {
        label: '最后活跃时间',
        prop: 'createTime'
    },
    {
        label: 'openID',
        prop: 'openId'
    },
    {
        label: 'userID',
        prop: 'userId'
    },
    {
        label: '操作',
        prop: 'operate'
    },
])

const tableData = ref([])

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const zheng = ref('')
const fan = ref('')
const dialogbulletVisible = ref(false)
const id = ref('')
const upload = ref<UploadInstance>()
const upload1 = ref<UploadInstance>()
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogImageUrl = ref('')
const dialogImageUrl1 = ref('')
const disabled1 = ref(false)

const getuserlist = () => {+
    getuserlistapi({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        idCardNo: filterData.value.list.idCardNo.value,
        isDelete: 0,
        phone: filterData.value.list.phone.value
    }).then((res: any) => {
        // console.log(res)
        pageInfo.value.total = res.total
        tableData.value = res.rows
    })
}

const openuploadtc = (res: any) => {
    dialogbulletVisible.value = true
    zheng.value = ''
    fan.value = ''
    id.value = res.id
}

const search = () => {
    shake(getuserlist, 400)
}

const onCancel = () => {
    showDialog.value = false
    bhtextarea.value = ''
}

const bullpayonChange = (file: any, fileListVal: any) => {
    // console.log(file);
    const reader = new FileReader()
    reader.onload = (event: any) => {
        const url = event.target.result
        // console.log(url, 11);
        zheng.value = url.split('base64,')[1]
    }
    reader.readAsDataURL(file.raw)
}

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const handleExceed1: UploadProps['onExceed'] = (files) => {
    upload1.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload1.value!.handleStart(file)
}


const handleRemove = (file: UploadFile) => {
    // console.log(file)
    zheng.value = ''
    upload.value!.clearFiles()
}

const bullpayonChange1 = (file: any, fileListVal: any) => {
    // console.log(file);
    const reader = new FileReader()
    reader.onload = (event: any) => {
        const url = event.target.result
        // console.log(url, 11);
        fan.value = url.split('base64,')[1]
    }
    reader.readAsDataURL(file.raw)
}

const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
    // console.log(dialogImageUrl.value, 1111)
}

const handlePictureCardPreview1 = (file: UploadFile) => {
    dialogImageUrl1.value = file.url!
    dialogVisible1.value = true
    // console.log(dialogImageUrl1.value, 1111)
}

const handleRemove1 = (file: UploadFile) => {
    // console.log(file)
    fan.value = ''
    upload1.value!.clearFiles()
}


const cancle = () => {
    fan.value = ''
    zheng.value = ''
    dialogbulletVisible.value = false
    upload.value!.clearFiles()
    upload1.value!.clearFiles()
}

const updateIdCardPhoto = () => {
    if (!zheng.value) {
        ElMessage({
            message: '请选择身份证正面',
            type: 'warning'
        })
        return
    }
    if (!fan.value) {
        ElMessage({
            message: '请选择身份证反面',
            type: 'warning'
        })
        return
    }
    updateIdCardPhotoapi({
        id: id.value,
        ownIdCardFront: zheng.value,
        ownIdCardBack: fan.value
    }).then((res: any) => {
        // console.log(res)
        if (res.code == 200) {
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            cancle()
            getuserlist()
        }
    })
}

const userlogout = (obj: any) => {
    ElMessageBox.confirm(
        '确定注销吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            userlogoutapi(obj).then((res: any) => {
                if (res.code === 200) {
                    ElMessage({
                        message: '操作成功',
                        type: 'success'
                    })
                    getuserlist()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消注销',
            })
        })
}

watch(() => props.show, (newval) => {
    showDialog.value = newval
    if (newval) {
        getuserlist()
    }
})

watch(showDialog, (newval) => {
    emits('update:show', newval)
})

</script>
<style lang="scss" scoped></style>
